<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="libs/jquery-1.7.1.js"></script>
	<script src="libs/jquery.mobile-1.0.1.js"></script>
	<script src="models/SharedObject.js"></script>
    <script src="graphics/BaseGraphic.js"></script>
    <script src="graphics/SquareUnit.js"></script>
    <script src="components/GamePad.js"></script>
    
    <script src="models/UnitMap.js"></script>
    <script src="models/Coordination.js"></script>
    <script src="models/Game.js"></script>
    <script src="models/shape/Shape.js"></script>
    <script src="models/shape/Square.js"></script>
    <script src="models/shape/Strip.js"></script>
    <script src="models/shape/LShape.js"></script>
    <script src="models/shape/AntiLShape.js"></script>
    <script src="models/shape/ZShape.js"></script>
    <script src="models/shape/AntiZShape.js"></script>
    <script src="models/shape/TShape.js"></script>
	<script>
		$(document).bind("pagecreate",function(){
			init();
			$("#pageTwo").live("pageshow",function()
			{	
				var columns = 12;
				var rows = 20;
				
				var pageHeight = $(window).height();
				var headH = $("#header").height();
				var recordH = $("#record").height();
				var canvasHeight = pageHeight - headH - recordH;
				var canvasWidth = columns*canvasHeight/rows;

				$("#myCanvas").attr("width",canvasWidth);
				$("#myCanvas").attr("height",canvasHeight);
				game = new Game();
				game.level = $("#modeSelector").attr("value");
				var gap = 2;
				var unitWidth = (canvasWidth - (columns + 1)*gap)/columns;
				map = new UnitMap(rows,columns);
				map.createMap();
				gamePad = new GamePad(map,unitWidth,gap,"#CCCCCC");
				gamePad.cleanPad();
				newShape();
				start();
			});
		});
	</script>
</head> 
<body> 
<script>
	var activeShape;
	var gamePad;
	var game;
	var map;
	function init()
	{
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		SharedObject.context = context; 
	}
	var timer;
	function start()
	{
		var speed = 550 - 50*(game.level);
		timer = setTimeout(start,speed); 
		onDownClick();   			   			
	}
	
	function newShape()
	{
		var number = 7;
		var random = Math.round(Math.random()*(number-1));
		switch(random)
		{
			case 0:
				activeShape = new Square(map);
				break;
			case 1:
				activeShape = new Strip(map);
				break;
			case 2:
				activeShape = new LShape(map);
				break;
			case 3:
				activeShape = new AntiLShape(map);
				break;
			case 4:
				activeShape = new ZShape(map);
				break;
			case 5:
				activeShape = new AntiZShape(map);
				break;
			case 6:
				activeShape = new TShape(map);
				break;
		}	
		activeShape.init();
		gamePad.draw(activeShape);
	}
	function updateStatus()
	{
	    var cleanLineCount = gamePad.cleanRow();
		if(cleanLineCount == -1)
		{
			clearTimeout(timer);
			$.mobile.changePage("gameOverWindow.html", "pop",false,false); 
			return;
		}
		else
		{
			game.score += cleanLineCount;
			$("#score").text(game.score);
			newShape();
		}
	}
	
	function onDownClick()
	{
		var result = activeShape.down();
		if(result)
		{
			gamePad.draw(activeShape);
		}
		else
		{
			updateStatus();
		}
	}
	function onSpaceBarClick()
	{
		var result = activeShape.quickDrop();
		if(!result)
		{
			gamePad.draw(activeShape);
			updateStatus();
		}  			
	}
	
	function onLeftClick()
	{
		var result = activeShape.left();
		if(result)
		{
			gamePad.draw(activeShape);
		}
		
	}
	function onRightClick()
	{
		var result = activeShape.right();
		if(result)
		{
			gamePad.draw(activeShape);
		}			
	}
	function onUpClick()
	{
		var result = activeShape.transform();
		if(result)
		{
			gamePad.draw(activeShape);
		}
	}
	
	document.onkeydown = function()
	{
		if(event.keyCode == "37")
		{
			//left;
			onLeftClick();
		}
		else if(event.keyCode == "39")
		{
			//right;
			onRightClick();
		}
		else if(event.keyCode == "40")
		{
			//down;
			onDownClick();        				
		}
		else if(event.keyCode == "38")
		{
			//up
			onUpClick();
		}
		else if(event.keyCode == "32")
		{
			//space bar
			onSpaceBarClick();
		}
	}
	</script>
<div data-role="page" id="pageOne">
	<div data-role="header">
		<h1>Tetris</h1>
	</div>

	<div data-role="content">	
		<div data-role="fieldcontain">
			<label for="select-choice-15" class="select">Mode</label>
			<select name="select-choice-15" id="modeSelector" data-theme="b" data-overlay-theme="d" data-native-menu="false">
				<option value="1">Easy</option>
				<option value="4">Normal</option>
				<option value="7">Hard</option>
			</select>
		</div>
		<p><a href="#pageTwo" id="startBtn" data-role="button">Start</a></p>
	</div>
</div>

<div data-role="page" id="pageTwo">
	<div id="header" data-role="header">
		<h1>Tetris</h1>
	</div>
	<div id="mainPad" data-role="content">
		<div id="record" class="ui-grid-b">
			<div class="ui-block-a">
				<div data-role="fieldcontain">
					<label>Score:</label>
					<label id="score">0</label>   
				</div>
			</div>
			<div class="ui-block-b">
				<div data-role="fieldcontain">
					<label>Level:</label>
					<label id="level">0</label>   
				</div>
			</div>
		</div>	
		<div id="canvasContainer">
    		<canvas id="myCanvas" width="0px" height="0px"></canvas>
    	</div>
    	<!-- <a href="gameOverWindow.html" data-rel="dialog" data-transition="pop">Open dialog</a> -->			
	</div>
</div>
</body>
</html>